// pages/shopIndex/shopIndex.js

const app = getApp();
const util = require("../../utils/util.js");
const baseImgUrl = util.baseImgUrl;

Page({

  /**
   * 页面的初始数据
   */
  data: {
     shopId:"1",
    shopBgUrl:baseImgUrl+"shopBg.png",
    shoplogo:baseImgUrl+"shoplogo.png",
    shopname:"海蓝之谜官方旗舰店",
    certifid:true,
    certifyUrl: baseImgUrl +"certifidImg.png",
    uncertifyUrl:baseImgUrl+"uncertifyImg.png",
    shopStage:1,
    grade:[1,2,3],
    gradeUrl:baseImgUrl+"gradeImg.png",
    fans: 100,
    followState:true,
    activeNav:0,//导航栏，默认选中第一个（首页）
    titleText:"热销商品",
    arrow_left:baseImgUrl+"arrow2_left.png",
    arrow_right: baseImgUrl +"arrow2_right.png",
    quickflag:false,
    ylqUrl: baseImgUrl+"ylq.png",
    wlqUrl:baseImgUrl+"wlq.png",
    weixin_l:baseImgUrl +"weixin_l.png",//分享面板中微信的图片
    friend_l:baseImgUrl+"friend_l.png",//分享面板分享到朋友圈的图片
    navlist:[{
      id:0,
      name:"首页"
    },{
        id: 1,
        name: "新品"
      },{
        id: 2,
        name: "特卖"
      },{
        id: 3,
        name: "动态"
      }],
    conponlist:[{
      id:0,
      tag:"全品类",
      amount:"100",
      requires:"满199元可用",
      state:true,

    }, {
        id: 2,
        tag: "全品类",
        amount: "100",
        requires: "满199元可用",
        state: false,
        
      }, {
        id: 12,
        tag: "服饰类",
        amount: "100",
        requires: "满399元可用",
        state: false,

      }],
    goodslist: [{
      id: 0,
      goodsUrl: baseImgUrl + "goods1.png",
      goodsname: "女友礼物精选集",
      content: "商品的介绍内容品的介绍内容商品的介绍内容商品的介绍内容s",
      biaoqian: ["今日秒杀", "HOT热卖", "特卖"],
      price: 45,
      sale: true,
      yuanjia: 60,
      scanNum: 1234,
      scanUrl: baseImgUrl + "scan.png",
    }, {
      id: 1,
      goodsUrl: baseImgUrl + "goods2.png",
      goodsname: "女友礼物精选集",
      content: "商品的介绍内容",
      biaoqian: ["今日秒杀"],
      price: 95,
      sale: false,
      yuanjia: 95,
      scanNum: 1200,
      scanUrl: baseImgUrl + "scan.png",
    }, {
      id: 2,
      goodsUrl: baseImgUrl + "goods2.png",
      goodsname: "女友礼物精选集",
      content: "商品的介绍内容商",

      price: 125,
      sale: true,
      yuanjia: 155,
      scanNum: 1000,
      scanUrl: baseImgUrl + "scan.png",
    }, {
      id: 3,
      goodsUrl: baseImgUrl + "goods2.png",
      goodsname: "女友礼物精选集",
      content: "商品的介绍内容商品的介绍内容商品的介绍内容商品的介绍内容",
      biaoqian: ["今日秒杀", "HOT热卖", "特卖"],
      price: 125,
      sale: true,
      yuanjia: 125,
      scanNum: 1000,
      scanUrl: baseImgUrl + "scan.png",
    }, {
      id: 4,
      goodsUrl: baseImgUrl + "goods2.png",
      goodsname: "女友礼物精选集",
      content: "商品的介绍内容商",
      biaoqian: ["今日秒杀", "特卖"],
      price: 125,
      sale: true,
      yuanjia: 155,
      scanNum: 1000,
      scanUrl: baseImgUrl + "scan.png",
    }, {
      id: 5,
      goodsUrl: baseImgUrl + "goods2.png",
      goodsname: "女友礼物精选集",
      content: "商品的介绍内容商品的介绍内容商品的介绍内容商品的介绍内容",
      biaoqian: ["今日秒杀", "HOT热卖",],
      price: 125,
      sale: false,
      yuanjia: 155,
      scanNum: 1000,
      scanUrl: baseImgUrl + "scan.png",
    }],
    menushow:false,//默认不显示分享弹出框
    shutUrl:baseImgUrl+"shut2.png",//关闭按钮
    footerlist:[{
      picurl:baseImgUrl+"allgoods.png",
      name:"全部商品"
    }, {
        picurl: baseImgUrl + "shop.png",
        name: "店铺详情"
      }, {
        picurl: baseImgUrl + "sever.png",
        name: "联系客服 "
      }, {
        picurl: baseImgUrl + "share2.png",
        name: "分享店铺"
      },],


     //新品
     newslist:[{
        id:0,
        date:"09月12日",
       newgoodslist:[{
         id: 0,
         goodsUrl: baseImgUrl + "goods1.png",
         goodsname: "女友礼物精选集",
         content: "商品的介绍内容品的介绍内容商品的介绍内容商品的介绍内容s",
         biaoqian: ["今日秒杀", "HOT热卖", "特卖"],
         price: 45,
         sale: true,
         yuanjia: 60,
         scanNum: 1234,
         scanUrl: baseImgUrl + "scan.png",
       }]

     }, {
         id: 0,
         date: "09月13日",
         newgoodslist: [{
           id: 0,
           goodsUrl: baseImgUrl + "goods1.png",
           goodsname: "女友礼物精选集",
           content: "商品的介绍内容品的介绍内容商品的介绍内容商品的介绍内容s",
           biaoqian: ["今日秒杀", "HOT热卖", "特卖"],
           price: 45,
           sale: true,
           yuanjia: 60,
           scanNum: 1234,
           scanUrl: baseImgUrl + "scan.png",
         }, {
           id: 1,
           goodsUrl: baseImgUrl + "goods2.png",
           goodsname: "女友礼物精选集",
           content: "商品的介绍内容",
           biaoqian: ["今日秒杀"],
           price: 95,
           sale: false,
           yuanjia: 95,
           scanNum: 1200,
           scanUrl: baseImgUrl + "scan.png",
         }]

       }, {
         id: 0,
         date: "09月13日",
         newgoodslist: [{
           id: 0,
           goodsUrl: baseImgUrl + "goods1.png",
           goodsname: "女友礼物精选集",
           content: "商品的介绍内容品的介绍内容商品的介绍内容商品的介绍内容s",
           biaoqian: ["今日秒杀", "HOT热卖", "特卖"],
           price: 45,
           sale: true,
           yuanjia: 60,
           scanNum: 1234,
           scanUrl: baseImgUrl + "scan.png",
         }, {
           id: 1,
           goodsUrl: baseImgUrl + "goods2.png",
           goodsname: "女友礼物精选集",
           content: "商品的介绍内容",
           biaoqian: ["今日秒杀"],
           price: 95,
           sale: false,
           yuanjia: 95,
           scanNum: 1200,
           scanUrl: baseImgUrl + "scan.png",
           }, {
             id: 2,
             goodsUrl: baseImgUrl + "goods1.png",
             goodsname: "女友礼物精选集",
             content: "商品的介绍内容品的介绍内容商品的介绍内容商品的介绍内容s",
             biaoqian: ["今日秒杀", "HOT热卖", "特卖"],
             price: 45,
             sale: true,
             yuanjia: 60,
             scanNum: 1234,
             scanUrl: baseImgUrl + "scan.png",
           }, {
             id: 3,
             goodsUrl: baseImgUrl + "goods2.png",
             goodsname: "女友礼物精选集",
             content: "商品的介绍内容",
             biaoqian: ["今日秒杀"],
             price: 95,
             sale: false,
             yuanjia: 95,
             scanNum: 1200,
             scanUrl: baseImgUrl + "scan.png",
           }]

       },] ,
       quciklist:[{
          id:0,
         quickpic: baseImgUrl + "home_qu.png",
         name:"首页"
       }, {
           id: 1,
           quickpic: baseImgUrl + "buycar_qu.png",
           name: "购物车"
         }, {
           id: 2,
           quickpic: baseImgUrl + "home_qu.png",
           name: "商品收藏"
         }, {
           id: 3,
           quickpic: baseImgUrl + "me_qu.png",
           name: "我的"
         }, {
           id: 4,
           quickpic: baseImgUrl + "search_qu.png",
           name: "搜索"
         }, {
           id: 5,
           quickpic: baseImgUrl + "share_qu.png",
           name: "分享赚积分"
         }],

        dongtailist:[{
          id:0,
          date:"09月12日",
          introduce: "会计学中商品的定义是 商品流通企业外购或 委托加工完成， 验收入库用于销售的各种商品。在人教版必修一政治书中的定义是用于交换的劳动产品。商品的基本属性是价值和 使用价值。",
          goodspic: [{
            id: "pic0",
            picurl: baseImgUrl + "good3.png",
          }, {
            id: "pic1",
            picurl: baseImgUrl + "goods2.png",
          }, {
            id: "pic2",
            picurl: baseImgUrl + "goods1.png",
          }, {
            id: "pic3",
            picurl: baseImgUrl + "goods2.png",
          }, {
            id: "pic4",
            picurl: baseImgUrl + "goods1.png",
          }]
        }, {
            id: 0,
            date: "09月12日",
            introduce: "会计学中商品的定义是 商品流通企业外购或 委托加工完成， 验收入库用于销售的各种商品。在人教版必修一政治书中的定义是用于交换的劳动产品。商品的基本属性是价值和 使用价值。",
            goodspic: [{
              id: "pic0",
              picurl: baseImgUrl + "good3.png",
            }, {
              id: "pic1",
              picurl: baseImgUrl + "goods2.png",
            }, {
              id: "pic2",
              picurl: baseImgUrl + "goods1.png",
            }]
          }],
    greyshow:false,//默认不显示分享到朋友圈的弹出框
    picurl:baseImgUrl+"moren_bg.jpg",//模拟分享到朋友圈的背景图

      
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function(options) {
    console.log(options);
    var that=this;
    wx.setNavigationBarTitle({
      title: that.data.shopname,
      success: function (res) {
        //苏Cm368A
        // success
      }
    })
  },

  /*********导航栏点击********** */
  choseNav:function(e){
      console.log(e);
      var that=this;
      var activeNav=e.currentTarget.dataset.index;
      that.setData({
        activeNav:activeNav
      })

  },

  /*********已经领取过的提示******* */
  tishi:function(){
    wx.showToast({
      title: '您已经领取过啦',
      icon: "none"
    })
  },
  /**********领取优惠券*********** */
  liquan:function(e){

    var that=this;
    var quanId=e.currentTarget.dataset.id;
    var thisIndex=e.currentTarget.dataset.index;
  //请求接口，获取领取结果，若成功
   that.data.conponlist[thisIndex].state=true;
    wx.showToast({
      title: '恭喜您领取成功',
      icon:"none"
    })
    that.setData({
        conponlist:that.data.conponlist
    })
  },
  /*********打开快速导航******* */
  openBtn:function(){
    var that=this;
    that.animation.translateX(-65).step()
  
    that.setData({ 
      quickflag:true,
      animation: this.animation.export(),
     
       })
 },
 /********收起快速导航******* */
  closeBtn:function(){
    var that = this;
    that.animation.translateX("50%").step()

    that.setData({
      animation: this.animation.export(),
     
    })
    setTimeout(function(){
      that.setData({
        
        quickflag: false,
      })
    },500)
  },

  /***********取消关注***************/
  quxiaoguanzhu:function(){
    var that=this;
    var shopId=that.data.shopId;
    
   wx.showModal({
    
     content: '确定取消关注',
     showCancel: true,
     cancelText: '取消',
     cancelColor: '#666',
     confirmText: '确定',
     confirmColor: '#ff1313',
     success: function(res) {
       if(res.confirm){
         console.log();
         //请求接口，取消关注
         //若请求成功，修改样式
          that.setData({
            followState:false
          })
       }

       if(res.cancel){
          console.log("取消操作")
       }
     },
     fail: function(res) {},
     complete: function(res) {},
   })
  },

  /***********添加关注*************** */
  guanzhu:function(){
    var that = this;
    var shopId = that.data.shopId;
    //请求接口，关注店铺
    //若请求成功，修改样式
    that.setData({
      followState: true
    })
  },
  /*********点击商品跳转页面******** */
  goodsDetail:function(){
      wx.navigateTo({
        url: '/pages/detail/detail',
      })
  },

  /********点击底部按钮跳转页面************ */
  goto:function(e){
    var that=this;
    var thisIndex=e.currentTarget.dataset.index;
    if(thisIndex==0){
      wx:wx.navigateTo({
        url: '/pages/allGoods/allGoods',
        success: function(res) {
          console.log("success");
        },
        fail: function(res) {},
        complete: function(res) {},
      })
    }
    if (thisIndex == 1) {
      wx: wx.navigateTo({
        url: '/pages/shopDetail/shopDetail',
        success: function (res) {
          console.log("success");
        },
        fail: function (res) { },
        complete: function (res) { },
      })
    }
    if (thisIndex == 2) {
     //联系客服
    }
    if(thisIndex==3){
      //分享店铺
      that.setData({
        menushow:true
      })
    }
  },

  //隐藏分享选择菜单
  hidechosemunu: function () {
    var that = this;
    that.setData({
      menushow: false
    })
  },

  //分享给朋友
  shareFriend: function () {
    wx.showShareMenu({
      withShareTicket: true
    })
  },
  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {
    this.animation = wx.createAnimation({
      duration:500
    })
   

    // that.animation.translateX(100).step()
    
  },
  //关闭分享图弹框
  shutgrey: function () {
    var that = this;
    that.setData({
      greyshow: false
    })
  },

  /********点击分享朋友圈 生成图片*************/
  formSubmit: function (e) {
    console.log(e);
    var that = this;

    this.setData({
      menushow: false,

    });
    wx.showToast({
      title: '正在生成海报...',
      icon: 'loading',
      duration: 1000
    });
    setTimeout(function () {
      wx.hideToast()
      that.createNewImg();
      that.setData({
        greyshow: true
      });
    }, 1000)
  },

  //将canvas转换为图片保存到本地，然后将图片路径传给image图片的src
  createNewImg: function () {
    var that = this;
    var context = wx.createCanvasContext('mycanvas');
    context.setFillStyle("#fff")
    context.fillRect(0, 0, 690, 750);
    // context.fillRect(10, imageTop, imageWidth, imageHeight)

    /***********图片路径********************/
    var pathurl = that.data.picurl;//分享图背景图

    //绘制上部图片
    context.drawImage(pathurl, 0, 0, 375, 420);


    //将模板图片绘制到canvas,在开发工具中drawImage()函数有问题，不显示图片
    var path1 = baseImgUrl+"avatar.png";//用户头像
    var path2 = that.data.shopname;
    var path3 = baseImgUrl+"shoplogo.png";//即客同城logo图
    var path4 = util.erweima;//二维码图片
  
    var pathline = util.imgUrl + "shortline.png";//直线
    var nickname ="用户名用户名用户名" ;//用户名
   
    //绘制即客同城logo
    context.drawImage(path3, 210, 150, 150, 40);

    //不知道是什么原因，手机环境能正常显示
    // context.save(); // 保存当前context的状态


    //绘制名字
    context.setFontSize(26);
    context.setFillStyle('#333333');
    context.setTextAlign('left');
    context.font = "weight";
    /**********文章标题********/
   
    //店铺名字
    /**********换行**开始*******/
    var chr = path2.split("");//这个方法是将一个字符串分割成字符串数组
    var temp = "";
    var row = [];
    for (var a = 0; a < chr.length; a++) {
      if (context.measureText(temp).width < 345) {
        temp += chr[a];
      }
      else {
        a--; //这里添加了a-- 是为了防止字符丢失，效果图中有对比
        row.push(temp);
        temp = "";
      }
    }
    row.push(temp);

    //如果数组长度大于2 则截取前两个
    if (row.length > 2) {
      var rowCut = row.slice(0, 2);
      var rowPart = rowCut[1];
      var test = "";
      var empty = [];
      for (var a = 0; a < rowPart.length; a++) {
        if (context.measureText(test).width < 330) {
          test += rowPart[a];
        }
        else {
          break;
        }
      }
      empty.push(test);
      var group = empty[0] + "..."//这里只显示两行，超出的用...表示
      rowCut.splice(1, 1, group);
      row = rowCut;
    }
    for (var b = 0; b < row.length; b++) {
      context.fillText(row[b], 15, 460 + b * 40, 345);

    }



    context.stroke();

    //绘制直线
    context.drawImage(pathline, 15, 520, 345, 1, 82);
    context.setFillStyle('#efefef');
    context.stroke();

    //绘制左下角二维码
    context.drawImage(path4, 15, 530, 100, 120);
    context.setFillStyle('#efefef');
    context.stroke();





    //绘制右下角上侧文字
    context.setFontSize(14);
    context.setFillStyle('#333');
    context.setTextAlign('left');


    /**********用户名**开始*******/

    nickname = nickname.split("");//这个方法是将一个字符串分割成字符串数组
    var temp2 = "";
    var row2 = [];

    for (var a = 0; a < nickname.length; a++) {
      if (context.measureText(temp2).width < 70) {
        temp2 += nickname[a];
      }
      else {
        a--; //这里添加了a-- 是为了防止字符丢失
        row2.push(temp2);
        temp2 = "";
      }
    }
    row2.push(temp2);
    console.log("row2" + row2);

    //如果数组长度大于1 则截取第1个
    if (row2.length > 1) {
      var rowCut2 = row2.slice(0, 1);//第一条需要截取的字符
      console.log(rowCut2);
      var rowPart2 = rowCut2[0];
      console.log("rowPart2" + rowPart2)
      var test2 = "";
      var empty2 = [];
      for (var a = 0; a < rowPart2.length; a++) {
        if (context.measureText(test2).width < 60) {
          test2 += rowPart2[a];
        }
        else {
          break;
        }
      }
      empty2.push(test2);
      console.log(empty2);
      var group2 = empty2[0] + "..."//

      rowCut2.splice(0, 1, group2);



      context.fillText(rowCut2[0], 190, 570, 70);
    } else {
      context.fillText(row2, 190, 570, 70);
    }


    context.stroke();


    /*****************************************/
    context.setFontSize(14);
    context.setFillStyle('#666');
    context.setTextAlign('left');
    context.fillText("正在浏览店铺", 270, 570, 164);
    context.stroke();

    //绘制右下角下侧文字
    context.setFontSize(14);
    context.setFillStyle('#666');
    context.setTextAlign('left');
    context.fillText("识别小程序，进入", 130, 630);
    context.stroke();

    context.setFontSize(14);
    context.setFillStyle('#ff1313');
    context.setTextAlign('left');
    context.fillText("即客同城", 240, 630);
    context.stroke();

    context.setFontSize(14);
    context.setFillStyle('#666');
    context.setTextAlign('left');
    context.fillText("小程序", 300, 630);
    context.stroke();

    //绘制右下角上侧logo图
    context.arc(155, 565, 25, 0, 2 * Math.PI) //画出圆
    context.strokeStyle = "#efefef";
    context.clip(); //裁剪上面的圆形

    context.drawImage(path1, 130, 540, 50, 50, 50, 50);
    context.setFillStyle('#efefef');
    context.stroke();
    context.stroke();

    context.draw();


    //将生成好的图片保存到本地，需要延迟一会，绘制期间耗时
    setTimeout(function () {
      wx.canvasToTempFilePath({
        x: 0,
        y: 133,
        width: 690,
        height: 750,
        destHeight: 750,
        destWidth: 690,
        canvasId: 'mycanvas',
        success: function (res) {
          var tempFilePath = res.tempFilePath;
          that.setData({
            imagePath: tempFilePath,
            canvasHidden: true
          });
          that.baocun();
        },
        fail: function (res) {
          console.log(res);
        }
      });
    }, 200);
  },

  //点击保存到相册
  baocun: function () {
    var that = this
    wx.saveImageToPhotosAlbum({
      filePath: that.data.imagePath,
      success(res) {
        console.log("图片保存成功")
        // wx.showModal({
        //   content: '图片已保存到相册，赶紧晒一下吧~',
        //   showCancel: false,
        //   confirmText: '好的',
        //   confirmColor: '#333',
        //   success: function (res) {
        //     if (res.confirm) {
        //       console.log('用户点击确定');
        //       /* 该隐藏的隐藏 */
        //       that.setData({
        //         maskHidden: false
        //       })
        //     }
        //   }, fail: function (res) {
        //     console.log(11111)
        //   }
        // })
      }
    })
  },

/**********快速导航************* */

  quickGo:function(e){
    console.log(e);
    var thisIndex=e.currentTarget.dataset.index;
   
    if(thisIndex==0){
      wx.switchTab({
        url: '/pages/index/index',
        success: function(res) {},
        fail: function(res) {console.log(res)},
        complete: function(res) {},
      })
    }
    if (thisIndex == 1) {
      
    }
    if (thisIndex == 2) {

    }
    if (thisIndex == 3) {
       wx.switchTab({
          url: '/pages/mine/mine',
         })
    }

  },


  /**
   * 
   * 生命周期函数--监听页面显示
   */
  onShow: function () {

  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {

  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {

  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {

  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {

  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {

  }
})